<template>
  <div>
    <div class="mlt">
      <el-form ref="form" label-width="80px" :model="form">
        <el-form-item label="商品名称">
          <el-input v-model="form.goods_name" style="width: 200px" />
          <el-button style="margin-left: 10px" type="primary" @click="onSubmit">
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mlt">
      <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
        <el-table-column label="商品名称" prop="goods_name" />
        <el-table-column label="退货数量" prop="refund_qty" />
        <el-table-column label="退款金额" prop="refund_amount" />
        <el-table-column label="时间" prop="updated_at" />
        <el-table-column label="说明" prop="refund_remark" />
      </el-table>
      <el-pagination
        v-if="total >= 10"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import { backList } from '@/api/commodity'

  export default {
    data() {
      return {
        emptyText: ' ',
        tableData: [],
        form: {
          page: 1,
          pagesize: 10,
        },
        total: '',
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      onSubmit() {
        this.init()
      },
      init() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        backList(this.form).then((e) => {
          this.total = e.data.total
          this.tableData = e.data.data
          loading.close()
          if (e.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },

      handleCurrentChange(val) {
        const _this = this
        _this.form.page = val
        this.init()
      },
    },
  }
</script>

<style></style>
